<template>
	<div class="container">
		<div class="bread hidden-lg-only hidden-md-only hidden-sm-only">
			<i class="el-icon-s-unfold"></i>
		</div>
		<div class="header hidden-xs-only">
			<el-row :gutter="20"
				type="flex"
				justify="end">
				<el-col :pull="9"
					:span="3">
					<div class="grid-content">酷奇科技</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content">首页</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content">收藏应用</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content">热门应用</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content">关于我们</div>
				</el-col>
			</el-row>
		</div>
		<div class="pictures">
			<el-row :gutter="20"
			
				align="middle"
				justify="center">
				<el-col v-for="img in imgs"
					:xs="{span:24,push:0}"
					class="imgs"
					:key="img"
					:sm="12"
					:md="{span:4,push:4}"
					:lg="{span:4,push:0}">

					<img width="100%"
						
						:src="img"
						alt="">

				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>


	export default {
		data() {
			return {
				imgs: []
			}
		},
		created() {
			let pics = require.context("../assets/images", false, /\.png$/);
			this.imgs = pics.keys().map(path => pics(path))
		}

	};
</script>
<style scoped>
/* .pictures /deep/ .imgs {
	text-align: center;
    height: 140px;
} */
.pictures {
	margin-top: 30px;
}
.bread {
	height: 30px;
	font-size: 30px;
	text-align: right;
}
</style>
